import React, {Component} from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
  Image,
} from 'react-native';

import Config from '../../config';
import TImage from '../../components/TImage';
import CommonListPage from '../common/CommonListPage';
import SizeUtils from '../../common/SizeUtils';
import Constants from '../../common/Constants';
import ActivityConstants from './ActivityConstants';
import ActivityPreviewListView from './ActivityPreviewListView';
import CommonViewPagerMultiShow from '../common/CommonViewPagerMultiShow';
import ActivityListItemView from './ActivityListItemView';
import ActivityRequestListAction from '../../actions/activity/ActivityRequestListAction';

const BTN_LABELS = [{label:"全部", tag:0},
                    {label:"敬请期待", tag:1},
                    {label:"报名中", tag:6},
                    {label:"精彩回顾", tag:3},];
//tag标签，0包含1，2，3, 6活动，1未开始活动，2进行中活动，3已结束活动, 4热门活动, 5最新活动, 6报名中


export default class ActivityMainPage extends CommonListPage {
    constructor(props) {
      super(props);

      this.state = {
        requestTag: -1,
      }
      //showType 0 直播 1 喜欢 2已结束
      this._showType = 0;
      this._viewPager = null;
      this._noEmpty = true;
      this._dataKey = "activity_id";
    }
    _dealEnterPage() {
      // super._dealEnterPage();
    
    }
    _getListViewStyle() {
      return {
          width:SizeUtils.getWindowSize().width,
          height:(SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(30)),
          backgroundColor:"#ffffff"};
    }

    _requestData(page, listView) {
        //page第几页
        //page_size每页几项
        //tag标签，0所有活动，1未开始活动，2进行中活动，3已结束活动, 4报名中的活动
        let tag = BTN_LABELS[this._showType].tag;
        new ActivityRequestListAction().call(listView, {page:page, page_size:10, tag:tag});
        this._viewPager.doRefresh();
    }

    _renderSmallPager() {
      return (
        <CommonViewPagerMultiShow ref={(ref) => this._viewPager = ref} type={Constants.SLIDER_TYPE.ACTIVITY}/>
      )
    }
    _renderNavigationBarRightButtonContent() {
      return (
        <TImage
            source={require("../../../resource/images/workhard/search.png")}
            style={{ width: 40, height: 40 }}
          />
      );
    }
    _onPressNavigationBarRightBtn() {
      this.gotoPage(Config.pages.plate_search,{type:'activities'});
    }
    _onRenderHeader() {
      return(
        <View style={{paddingBottom:SizeUtils.translateDesignHeightToCode(0)}}>
          {this._renderSmallPager()}
          {this._renderTypeBtns()}
        </View>
      )
    }

    _renderTypeBtns() {
      return(
        <View style={{flexDirection:"row",justifyContent:"space-around",
            alignItems: 'center',
            height:SizeUtils.translateDesignHeightToCode(80),
            borderBottomColor:'#e3e3e3',borderBottomWidth:SizeUtils.translateDesignNumToCode(3),}}>
          {BTN_LABELS.map((value, index) => {return this._renderBtnText(value, index)})}
        </View>
      )
    }

    _renderBtnText(value, index) {
      return (
        <TouchableOpacity key={index} onPress={() => {this._onPressTypeBtn(index)}}
            style={[{
              height:SizeUtils.translateDesignHeightToCode(80),
              width:SizeUtils.getWindowSize().width/4,
              alignItems: 'center',justifyContent: 'center',
              borderRightColor:'#e3e3e3',borderRightWidth:SizeUtils.translateDesignNumToCode(3),
            }]}>
          <Text style={[this._getButtonTextStyle(index),
            {fontSize:SizeUtils.translateFontSizeToCode(28)}]}>
            {value.label}
          </Text>
        </TouchableOpacity>
      )
    }

    _getButtonContainerStyle(index) {
      if(this._showType == index) {
        return style.container_selected;
      }
      return style.container_unSelected;
    }

    _getButtonTextStyle(index) {
      if(this._showType == index) {
        return style.btn_selected;
      }
      return style.btn_unselected;
    }

    _onPressTypeBtn(index) {
      if(!this.state.isRefreshing && this._listView!=null) {
        this._showType = index;
        this._listView.doRefresh();
      }
    }

    _onRenderItem(data, rowID) {
      return (<ActivityListItemView key={rowID} data={data} rowID={rowID}/>)
    }

    _renderPreviewList(tag) {
      return(
        <ActivityPreviewListView style={{paddingTop:10}} page={this} data={{tag:tag}} />
      )
    }
}

let style = StyleSheet.create({
  container_selected: {
    borderBottomColor: "#db3132",
  },

  container_unSelected: {
  },

  btn_selected: {
    color: "#db3132",
  },

  btn_unselected: {
    color: "#000",
  },
});
